<!DOCTYPE html> 
<html>
<head>
<title>Mi Ubicación</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css">
  <link rel="stylesheet" href="css/theme-classic.css">
  <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css">
    

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    <script type="text/javascript">
        // When map page opens get location and display map
        $('.page-map').live("pagecreate", function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });
        
        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }
    </script>
</head>
<body>
   <div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;" rel="external">
      
    <div data-role="header"  data-fullscreen="true">
        <a href="menu.html" rel="external" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-notext" data-transition="back"></a>
        <h1>Mi Ubicación</h1>
    </div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>
</body>
</html>